<template>
  <div class="item-main" @click="gotoPage">
    <div class="flex justify-between items-center buy">
      <span class="us-buy">
        <span v-if="items.direction === 'buy'" style="color: #5eba89">{{ $t('购买') }}</span>
        <span v-else style="color: #e35461">{{ $t('出售') }}</span>
        {{ items.symbol }}
      </span>
      <span v-if="items.direction === 'buy'">
        <span
          :class="{ 'blue': items.state === '0', 'yellow': items.state === '1', 'red': items.state === '2' || items.state === '5', 'green': items.state === '3' }">{{
            arr[items.state / 1] }}</span>
        <van-icon name="arrow" />
      </span>
      <span v-else>
        <span
          :class="{ 'blue': items.state === '0', 'yellow': items.state === '1', 'red': items.state === '2' || items.state === '5', 'green': items.state === '3' }">{{
            arr1[items.state / 1] }}</span>
        <van-icon name="arrow" />
      </span>
    </div>
    <div class="flex justify-between items-center price-i">
      <span>{{ $t('单价') }} {{ items.currency || currency.currency_symbol }} {{ items.symbol_value }}</span>
      <span style="color: #b8bcc5">{{ items.time }}</span>
    </div>
    <div class="flex justify-between items-center price-i pd-32">
      <span>{{ $t('数量') }} {{ (items.coin_amount / 1).toFixed(items.symbol === 'USDT' ? 2: 4) }} {{ items.symbol }}</span>
      <span class="textColor" style="font-weight: bold">{{ items.currency }} {{ items.amount }}</span>
    </div>
    <div class="niu flex items-center">
      <van-badge v-if="items.msg" :content="items.msg">
        <img src="@/assets/image/Subtract.png" class="mr-20" alt="" />
      </van-badge>
      <img v-else src="@/assets/image/Subtract.png" class="mr-20" alt="" />
      {{ items.c2c_user_nick_name }}
      <!-- <img src="@/assets/image/up.png" alt="" />
      资金安全 -->
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { Icon, Badge } from 'vant'

export default {
  props: ['items'],
  data() {
    return {
      arr: [this.$t('未付款'), this.$t('已付款'), this.$t('申诉中'), this.$t('已完成'), this.$t('已取消'), this.$t('已超时')],
      arr1: [this.$t('等待付款'), this.$t('待确认'), this.$t('申诉中'), this.$t('已完成'), this.$t('已取消'), this.$t('已超时')],
    }
  },
  computed: {
    ...mapState('home', ['currency'])
  },
  methods: {
    gotoPage() { // 去到相应的页面
      // console.log(this.items)
      // this.$store.commit('c2c/SET_ADV_ID',this.items.id)
      this.$store.commit('c2c/SET_ORDER_NO', this.items.order_no)
      // return
      if (this.items.direction === 'buy') {
        if (this.items.state / 1 === 0 || this.items.state / 1 === 5) { // 未付款
          this.$router.push(`/orderGeneration`)
        } else if (this.items.state / 1 === 1) { // 已付款
          this.$router.push('/paymentDetail')
        } else { /// 111  其他
          this.$router.push('/tradeOrderDetail')
        }
      } else {
        if (this.items.state / 1 === 0 || this.items.state / 1 === 5) { // 未付款
          this.$router.push(`/sellGenerate`)
        } else if (this.items.state / 1 === 1) { // 已付款
          this.$router.push(`/confirmedPaid`)
          // this.$router.push('/paymentDetail?order_no=' + this.items.order_no)
        } else { /// 111  其他
          this.$router.push('/tradeOrderDetail')
        }
      }
    }
  },
  components: {
    [Icon.name]: Icon,
    [Badge.name]: Badge,
  },
}
</script>

<style lang="scss" scoped>
.item-main {
  padding: 42px 0 66px;
  margin: 0 30px;
  font-size: 28px;
  color: #868d9a;

  @include themify() {
    border-bottom: 1px solid themed("line_color");
  }

  .buy {
    margin-bottom: 40px;
    font-size: 32px;

    .us-buy {
      color: #fff;
    }
  }

  .price-i {
    margin-bottom: 28px;
  }

  .pd-32 {
    margin-bottom: 32px;
  }

  .niu {
    width: 200px;
    height: 57px;
    overflow: hidden;

    @include themify() {
      background: themed("tab_background");
    }

    border-radius: 50px;
    font-size: 22px;
    padding: 0 20px;

    img {
      width: 30px;
      height: 30px;
      margin-top: 6px;
    }
  }
}

::v-deep {
  .van-badge--fixed {
    top: 80%;
  }
}

.blue {
  color: #1D91FF;
}

.green {
  color: #2EBD85;
}

.red {
  color: #E35461
}

.yellow {
  color: #E2AE27;
}
</style>
